<template>
  <div class="footer">
    <div class="footer-main">
      <ul class="flex-box">
        <li v-for="(item,index) in footerLists" :key="index" @click="linkActive(index)" class="flex-box">
          <span><svg class="icon" aria-hidden="true">
            <use :xlink:href="index===activeIndex?item.iconActive:item.icon"></use>
          </svg></span>
          <p>{{item.name}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src

export default {
  data() {
    return {
      footerLists: [
        {
          link: '/',
          icon: '#icon-life-zhuyenormal',
          iconActive: '#icon-life-zhuyeactive',
          name: '烨谈'
        },
        {
          link: '/find',
          icon: '#icon-life-faxiannormal',
          iconActive: '#icon-life-faxianactive',
          name: '发现'
        },
        {
          link: '/zhouQi',
          icon: '#icon-life-shengmingzhouqibiaonormal',
          iconActive: '#icon-life-shengmingzhouqibiaoactive',
          name: '周期表'
        },
        {
          link: '/mine',
          icon: '#icon-life-gerenzhongxinnormal',
          iconActive: '#icon-life-gerenzhongxinactive',
          name: '我的'
        }
      ],
      activeIndex: 0,
      routeNames: ['yeTan', 'find', 'zhouQi', 'mine']
    }
  },
  computed: {},
  methods: {
    linkActive(index) {
      this.activeIndex = index
      this.$router.push(this.footerLists[index].link)
    }
  },
  watch: {
    $route() {
      let i = this.routeNames.indexOf(this.$route.name)
      this.activeIndex = i <= 0 ? 0 : i
    }
  },
  created() {},
  mounted() {
    console.log(this.$route)
  }
}
</script>
<style lang="scss" scoped>
.footer,
.find-top {
  width: 100%;
  height: r(49);
  position: fixed;
  z-index: 66;
  bottom: 0;
  left: 0;
  background: #fff;
  border-top: 1px solid #d8d8d8;
  .footer-main,
  .find-main {
    max-width: 750px;
    height: 100%;
    margin: 0 auto;
    ul {
      width: 100%;
      height: 100%;
      li {
        width: 25%;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        color: #8f8f94;
        a {
          color: #8f8f94;
        }
        span {
          height: r(26);
          display: block;
          font-size: r(26);
          text-align: center;
        }
        p {
          width: 100%;
          margin-bottom: 0;
          font-size: r(11);
          line-height: r(14);
          text-align: center;
          margin-top: r(2);
        }
      }
    }
  }
}
</style>
